<template>
    <div class="search-form">
        <el-form :inline="true" :model="formInline" ref="searchForm" size="small">
            <el-form-item v-for="(item, index) in searchFilter" :label="item.title" :prop="item.field" :key="index">
                <el-input v-if="item.widget === 'input'" v-model="formInline[item.field]" :placeholder="item.title"
                    @keyup.enter.native.prevent="onSubmit"></el-input>
                <el-select v-if="item.widget === 'select'" v-model="formInline[item.field]" :placeholder="item.title">
                    <el-option v-for="(v, k) in item.options" :key="k" :label="v.label" :value="v.value">
                    </el-option>
                </el-select>
                <el-radio-group v-if="item.widget === 'radio'" v-model="formInline[item.field]">
                    <el-radio-button v-for="(v, k) in item.options" :key="k" :label="v.value">
                        {{ v.label }}
                    </el-radio-button>
                </el-radio-group>
                <el-cascader v-if="item.widget === 'cascader'" v-model="formInline[item.field]"
                    :options="item.options"></el-cascader>
                <el-date-picker v-if="item.widget === 'daterange'" v-model="formInline[item.field]" type="daterange"
                    value-format="yyyy-MM-dd" range-separator="至" :start-placeholder="item.title + '开始'"
                    :end-placeholder="item.title + '结束'">
                </el-date-picker>
                <el-date-picker v-if="item.widget === 'datetimerange'" v-model="formInline[item.field]" type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
                <el-date-picker v-if="item.widget === 'date'" v-model="formInline[item.field]" type="date"
                    value-format="yyyy-MM-dd" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                <el-button icon="el-icon-attract" @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "SearchFrom",
    props: {
        searchFilter: Array
    },
    beforeMount() {
        this.searchFilter.forEach(val => {
            this.$set(this.formInline, val.field, '')
        })
    },
    data() {
        return {
            formInline: {
            }
        }
    },
    methods: {
        onSubmit() {
            this.$emit('search', this.formInline);
        },
        onAdd() {
            this.$emit('add');
        },
        resetForm() {
            for (let i in this.formInline) {
                this.$set(this.formInline, i, '')
            }
        }
    }
}
</script>

<style scoped>
.search-form {
    background-color: #fff;
    box-sizing: border-box;
}
</style>